<template>
  <div class="about welcome">
    <div class="aside">
      <div class="headerFont">个人资料</div>
      <!-- 个人资料 -->
      <div class="bodyContent">
        <!-- 头像盒子 -->
        <!-- <span
          class="avatarBox"
          :style="{
            background: `url(${require('@/assets/img/' +
              avatarPath +
              '')}) no-repeat center center`,
            'background-size': 'cover',
          }"
        ></span> -->
        <!-- <img class="avatarBox" :src="bannerImage" alt="" /> -->
        <img class="avatarBox" src="/assets/img/banner-1.jpg" alt="" />
        <span @click="handleClick">修改头像</span>
        <input
          ref="fileInput"
          type="file"
          accept="image/*"
          style="display: none"
          @change="handleFileChange"
        />
        <div>
          <span><i class="el-icon-user-solid"></i>登录名称:</span>
          <span>{{ FirstUserInfo.Uname }}</span>
        </div>
        <div>
          <span><i class="el-icon-phone"></i>手机号码:</span
          ><span>{{ FirstUserInfo.Uphone }}</span>
        </div>
        <div>
          <span><i class="el-icon-message"></i>邮箱地址:</span
          ><span>{{ FirstUserInfo.Email }}</span>
        </div>
        <div>
          <span><i class="el-icon-date"></i>创建时间:</span
          ><span>{{ FirstUserInfo.UcreateDate }}</span>
        </div>
      </div>
    </div>
    <div class="indexMain">
      <div id="zhedang"></div>
      <div class="headerFont">其他</div>
      <span class="checkBtn" @click="bulletinBoard">操作记录栏</span>
      <span @click="basicInfoBtn">修改个人资料</span>
      <!-- 公告栏板块 -->
      <div class="bulletinBoard SMainContent checkMain">
        <el-empty description="操作记录栏为空"></el-empty>
      </div>
      <!-- 基本资料板块 -->
      <div class="basicInfo SMainContent">
        <div class="formItem">
          <label for="">用户名称:</label
          ><input :disabled="true" type="text" v-model="NewUserInfo.Uname" />
        </div>
        <div class="formItem">
          <label for="">手机号码:</label
          ><input type="text" :value="NewUserInfo.Uphone" />
        </div>
        <div class="formItem">
          <label for="">邮箱:</label
          ><input type="text" :value="NewUserInfo.Email" />
        </div>
        <div class="formItem">
          <label for="">性别:</label>
          <input name="sex" type="radio" value="1" />男
          <input name="sex" type="radio" value="0" />女
        </div>
        <button type="botton" @click="saveDataBtn" class="saveDataBtn">
          <i class="el-icon-check"></i>保存
        </button>
        <button type="botton" class="backBtn" @click="backBtnClick">
          <i class="el-icon-d-arrow-left"></i>返回
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      UserDataInfo: {
        sexFlag: 1, //0是女1是男
      },
      FirstUserInfo: {},
      NewUserInfo: {},
      // bannerImage: require("@/assets/img/banner-1.jpg"), // 新增一个数据属性来存储头像路径
    };
  },
  methods: {
    basicInfoBtn(e) {
      // 基础资料按钮
      this.changePlate(e.srcElement);
    },
    bulletinBoard(e) {
      //  公告栏按钮
      this.changePlate(e.srcElement);
    },
    toDo(e) {
      //  代办事项按钮
      this.changePlate(e.srcElement);
    },
    changeMain() {
      let spanBtns = document.querySelectorAll(".about .indexMain>span");
      for (let i of spanBtns) {
        i.classList.remove("checkBtn");
      }
      let SMainContents = document.querySelectorAll(".SMainContent");
      for (let i of SMainContents) {
        i.style.display = "none";
        i.classList.remove("checkMain");
      }
    },
    // 改变模块的方法
    changePlate(event) {
      let basicInfo = document.querySelector(".basicInfo");
      let bulletinBoard = document.querySelector(".bulletinBoard");
      let zhedang = document.querySelector("#zhedang");
      let toDo = document.querySelector(".toDo");
      if (event.innerText === "修改个人资料") {
        // 遮挡线的左边值
        zhedang.style.left = "116px";
        this.changeMain();
        event.classList.add("checkBtn");
        basicInfo.style.display = "block";
        basicInfo.classList.add("checkMain");
      } else if (event.innerText === "操作记录栏") {
        // 遮挡线的左边值
        zhedang.style.left = "16px";
        this.changeMain();
        event.classList.add("checkBtn");
        bulletinBoard.style.display = "block";
        bulletinBoard.classList.add("checkMain");
      }
    },
    // 返回第一次用户登录进来的信息
    backBtnClick() {
      this.NewUserInfo = { ...this.FirstUserInfo };
    },
    // 保存数据按钮
    saveDataBtn() {
      let params = new URLSearchParams();
      params.append("Uname", this.NewUserInfo.Uname);
      params.append("Email", this.NewUserInfo.Email);
      params.append("Uphone", this.NewUserInfo.Uphone);
      params.append("Uid", this.NewUserInfo.Uid);
      this.$axios
        .post(`http://localhost:8080/UpdateUserInfoById`, params) //补上后台接口即可
        .then((res) => {
          let resData = JSON.parse(res.data);
          console.log(resData.msg);
          this.$message({
            type: resData.type,
            message: resData.msg,
          });
          this.getUserInfo();
        })
        .catch((error) => {
          // 请求失败
          console.log(error);
          return;
        });
    },
    getUserInfo() {
      this.$axios
        .get(
          `http://localhost:8080/GetUserInfoById?Uid=${localStorage.getItem(
            "Uid"
          )}`
        ) //补上后台接口即可
        .then((res) => {
          console.log(res.data);
          // 请求成功
          this.FirstUserInfo = res.data;
          this.NewUserInfo = { ...this.FirstUserInfo };
        })
        .catch((error) => {
          // 请求失败
          console.log(error);
          return;
        });
    },
    handleClick() {
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
      this.uploadImage();
    },
    uploadImage() {
      const formData = new FormData();
      formData.append("img", this.selectedFile);
      this.$axios
        .post("http://localhost:8080/setUpload", formData)
        .then((res) => {
          // 可以在这里处理成功后的逻辑
          console.log(res.data);
        })
        .catch((error) => {
          console.error("Error uploading image:", error);
          // 可以在这里处理错误逻辑
        });
    },
  },
  computed: {},
  mounted() {
    let radiosBox = document.querySelectorAll(`input[name=sex]`);
    if (this.UserDataInfo.sexFlag == 0) {
      radiosBox[1].checked = true;
    } else {
      radiosBox[0].checked = true;
    }
    this.getUserInfo();
  },
};
</script>

<style scope>
@import url(../../../assets/css/PersonalCenter.css);
</style>
